<template>
  <div class="goods-sheleves">
    <div :class="[`goods-wrap-${compData.data.mode}`]" :style="wrapStyle()">
      <template v-for="good in compData.data.goodsList" :key="good">
        <div class="item" :style="itemStyle()">
          <div class="item-wrap">
            <div class="tag" v-if="compData.data.tagStyle.show">
              <sa-image :url="compData.data.tagStyle.src" radius="0" :suffix="null"></sa-image>
            </div>
            <sa-image :url="good.image" size="64" :suffix="null"></sa-image>
            <div class="desc">
              <div
                v-if="compData.data.goodsFields.title.show"
                class="title sa-m-b-8 sa-table-line-1"
                :style="{
                  color: compData.data.goodsFields.title.color,
                }"
              >
                {{ good.title }}
              </div>
              <div
                v-if="compData.data.goodsFields.price.show"
                class="price"
                :style="{
                  color: compData.data.goodsFields.price.color,
                }"
              >
                ￥{{ good.price[0] }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps(['compData']);

  const w = {
    1: '50%',
    2: '33.3%',
    3: '32%',
  };

  function wrapStyle() {
    return {
      display: 'flex',
      'flex-wrap': `${props.compData.data.mode == 3 ? 'nowrap' : 'wrap'}`,
      margin: `-${props.compData.data.space / 2}px`,
    };
  }

  function itemStyle() {
    return {
      width: `${w[props.compData.data.mode]}`,
      padding: `${props.compData.data.space / 2}px`,
      'flex-shrink': 0,
      'border-top-left-radius': `${props.compData.data.borderRadiusTop}px`,
      'border-top-right-radius': `${props.compData.data.borderRadiusTop}px`,
      'border-bottom-left-radius': `${props.compData.data.borderRadiusBottom}px`,
      'border-bottom-right-radius': `${props.compData.data.borderRadiusBottom}px`,
      overflow: 'hidden',
    };
  }
</script>

<style lang="scss" scoped>
  .goods-sheleves {
    .goods-wrap-1,
    .goods-wrap-2,
    .goods-wrap-3 {
      .item-wrap {
        background: #fff;
        // box-shadow: 0 5px 21px 0 rgba(234, 234, 234, 0.46);
        border-radius: 4px;
        position: relative;
        .tag {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          .sa-image {
            width: 36px !important;
            height: 22px !important;
          }
        }
        .sa-image {
          width: 100% !important;
          height: 110px !important;
        }
        .desc {
          padding: 10px;
          flex: 1;
          .name {
            font-size: 13px;
          }
          .price {
            font-size: 12px;
          }
        }
      }
    }

    .goods-wrap-1 {
      .item-wrap {
        display: flex;
        height: 64px;
        font-size: 12px;
        .sa-image {
          width: 64px !important;
          height: 100% !important;
        }
      }
    }
  }
</style>
